<template>
  <section class="rush-bank">
    <el-dialog v-el-drag-dialog :visible.sync="visible" :close-on-click-modal="false" title="题库设置" center fullscreen @close="handleCancel()">
      <section class="bank-main">
        <el-form ref="form" :inline="true" :model="form" :rules="rules">
          <el-form-item label="题库:" prop="questionIds">
            <el-cascader ref="classify" v-model="form.questionIds" :options="classifyOptions" style="width:100%" clearable :props="classifyProps" />
          </el-form-item>
          <el-form-item label="是否包含下级题库:">
            <el-checkbox v-model="form.isIncludeQuestion">包含下级题库</el-checkbox>
          </el-form-item>
          <el-form-item label="试题类型:" prop="typeList">
            <el-select v-model="form.typeList" multiple placeholder="请选择">
              <el-option v-for="(item, index) in dict.STLX" :key="index" :label="item.dictName" :value="item.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item label="试题难度:" prop="levelList">
            <el-select v-model="form.levelList" multiple placeholder="请选择">
              <el-option v-for="(item, index) in dict.QUESTIONLEVEL" :key="index" :label="item.dictName" :value="item.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">添加</el-button>
          </el-form-item>
        </el-form>
        <section class="main-table">
          <el-table :data="list" style="width: 100%">
            <el-table-column type="index" width="50" />
            <el-table-column prop="questionIdValue" label="题库名称" />
            <el-table-column prop="isIncludeQuestion" align="center" label="是否包含下级题库">
              <template slot-scope="scope">
                <span>{{ scope.row.isIncludeQuestion == 1 ? '是' : '否' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="questionTypeValue" label="试题类型" />
            <el-table-column prop="questionLevelValue" label="试题难度" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </section>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="padding: 10px 30px;" @click="handleCancel()">关 闭</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import elDragDialog from '@/directive/el-drag-dialog'
import { getDictByCode, getClassifyTree, query, insert, del } from './api'
export default {
  name: 'RushBank',
  directives: { elDragDialog },
  props: {
    id: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: true,
      form: {
        questionIds: [],
        questionId: '',
        isIncludeQuestion: '',
        typeList: [],
        questionType: '',
        levelList: [],
        questionLevel: ''
      },
      rules: {
        questionIds: [{ required: true, message: '请选择题库', trigger: 'blur' }],
        typeList: [{ required: true, message: '请选择试题类型', trigger: 'blur' }],
        levelList: [{ required: true, message: '请选择试题难度', trigger: 'blur' }]
      },
      list: [],
      classifyProps: {
        label: 'classifyName',
        value: 'id',
        checkStrictly: true
        // lazy: true,
        // lazyLoad(node, resolve) {
        //   getClassifyTree({ parentId: (node.data && node.data.id) || -1 }).then(res => {
        //     resolve(res.data.data)
        //   }).catch(() => {
        //     resolve([])
        //   })
        // }
      },
      classifyOptions: [],
      dict: {
        QUESTIONLEVEL: [], // 试题难度
        STLX: [] // 试题类型
      }
    }
  },
  watch: {
    form: {
      handler(newName, oldName) {
        if (this.$refs.classify) {
          this.$refs.classify.dropDownVisible = false
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.visible = true
    for (const key in this.dict) {
      this.getDict(key)
    }
    this.getClassify()
    this.getList()
  },
  methods: {
    /**
     * 获取字典
     */
    getDict(code) {
      return new Promise((resolve, reject) => {
        getDictByCode(code).then(res => {
          this.dict[code] = (res.data.data && res.data.data.length > 0) ? res.data.data[0].list : []
        }).catch(error => {
          reject(error)
        })
      })
    },

    /**
     * 获取分类
     */
    getClassify() {
      return new Promise((resolve, reject) => {
        getClassifyTree({ classifyType: 'JNZQFL03' }).then(({ data }) => {
          this.classifyOptions = data.data || []
        }).catch(error => {
          reject(error)
        })
      })
    },

    getList() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        query({
          dataType: this.type,
          dataId: this.id
        }).then(({ data }) => {
          loading.close()
          this.list = Object.assign([], data.data)
        }).catch(error => {
          reject(error)
          loading.close()
        })
      })
    },

    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          const params = {
            dataType: this.type,
            dataId: this.id,
            questionId: this.form.questionIds.length > 0 ? this.form.questionIds[this.form.questionIds.length - 1] : '',
            isIncludeQuestion: this.form.isIncludeQuestion ? 1 : 0,
            questionType: this.form.typeList.length > 0 ? this.form.typeList.join(',') : '',
            questionLevel: this.form.levelList.length > 0 ? this.form.levelList.join(',') : ''
          }
          return new Promise((resolve, reject) => {
            insert(params).then(() => {
              this.dialogVisible = false
              loading.close()
              this.$message({
                title: '成功',
                message: '添加成功',
                type: 'success',
                duration: 2000
              })
              for (const i in this.form) {
                if (this.form['' + i + ''] instanceof Array) {
                  this.form['' + i + ''] = []
                } else {
                  this.form['' + i + ''] = ''
                }
              }
              this.getList()
            }).catch(error => {
              loading.close()
              reject(error)
            })
          })
        } else {
          return false
        }
      })
    },

    handleDelete(row) {
      this.$confirm('确定删除该题库吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '请稍后',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        })
        return new Promise((resolve, reject) => {
          del(row.id).then(() => {
            loading.close()
            this.$message({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          }).catch(error => {
            loading.close()
            reject(error)
          })
        })
      }).catch()
    },

    handleCancel() {
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="scss">
.rush-bank {
  .bank-main {
    min-height: calc(100vh - 140px);
    max-height: calc(100vh - 140px);
    overflow: hidden;
    position: relative;
    .main-table {
      position: absolute;
      top: 70px;
      left: 0;
      right: 0;
      bottom: 0;
      box-sizing: border-box;
      overflow: hidden;
      &::-webkit-scrollbar {
        width: 8px; /*对垂直流动条有效*/
        height: 1px; /*对水平流动条有效*/
      }
      /** 滚动条轨道*/
      &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: white;
        border-radius: 3px;
      }
      /** 滚动条里面小方块*/
      &::-webkit-scrollbar-thumb {
        height: 32px;
        border-radius: 5px;
        box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
        background-color: #eaeaea;
      }
      &:hover {
        overflow: auto;
      }
    }
  }
}
</style>
